<template>
    <div class="warrper">
        <div class="ofHead">点餐</div>
        <div class="ofTab">
            <div class="tab">
               <mt-button size="small" @click="active = 'tab-container1'">商品</mt-button>
               <mt-button size="small" @click.native.prevent="active = 'tab-container2'">评论</mt-button>
               <mt-button size="small" @click.native.prevent="active = 'tab-container3'">商家</mt-button>
            </div>
           <mt-tab-container v-model="active">
                <mt-tab-container-item id="tab-container1">
                    <div class="tac">

                    </div>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container2">
                    <mt-cell title="tab-container 2"></mt-cell>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container3">
                    <mt-cell title="tab-container 3"></mt-cell>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>
<script>
import Vue from "vue";
import { Button, TabContainer, TabContainerItem } from 'mint-ui';
Vue.component(Button.name, Button);

Vue.component(TabContainer.name, TabContainer);
Vue.component(TabContainerItem.name, TabContainerItem)
export default {
    data(){
        return{
            active:'tab-container1'
        }
    }
    
}
</script>
<style lang="stylus" scoped>
.warrper{
    background-color #fff
}
.ofHead{
    width 100%
    height 1rem
    line-height 1rem
    font-size .28rem
    text-align center
}
.ofTab{
    width 100%
    height 500px
}
.tac{
    min-width 1rem
}
//  手机
@media screen and (max-width:600px){
   #header,#content,#footer{width:400px;}
   .right,.center{margin-top:10px;}
   .left,.right{height:100px;}
   .center{height:200px;}
   .ofHead{
    background-color red
   }
}
// 平板
@media screen and (min-width:600px) and (max-width:960px){
    #header,#content,#footer{width:600px;}
.right{display:none;}
.left,.center{height:400px;float:left;}
.left{width:160px;margin-right:10px;}
.center{width:430px;}
.ofHead{
    background-color blue
   }
}
// pc
@media screen and (min-width:960px){
    #header,#content,#footer{width:960px;}
.left,.center,.right{height:400px;float:left;}
.left{width:200px;margin-right:10px;}
.center{width:540px;margin-right:10px;}
.right{width:200px;} 
.warrper{
    background-color yellow
   }
}

</style>


